<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>签到</title>
  <link rel="stylesheet" href="../../layuimini/lib/layui-v2.5.5/css/layui.css" media="all" />
  <style>
    .signin_bt {
      height: 160px;
      width: 160px;
    }
  </style>
</head>

<body>
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md4 layui-col-md-offset4" style="text-align: center;">
        <h1>打卡签到</h1>
      </div>
    </div>
    <div style="height: 60px;"></div>
    <div class="layui-row">
      <div class="layui-col-md2 layui-col-md-offset5" style="text-align: center;">
        <button id="sign_bt" class="layui-btn layui-btn-primary layui-btn-radius signin_bt">
          <i id="sign_icon" class="layui-icon layui-icon-face-cry" style="font-size: 50px;"></i>
        </button>
      </div>
    </div>
    <div style="height: 60px;"></div>
    <div class="layui-row">
      <div class="layui-col-md-offset4 layui-col-md4" style="text-align: center;">
        <p id="sign_message">您未完成签到</p>
      </div>
    </div>
  </div>

  <script src="../../layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
  <script src="../../layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
  <script src="../../layuimini/js/lay-config.js" charset="utf-8"></script>
  <script>
    layui.use(['jquery', 'common'], function () {
      var common = layui.common
      var $ = layui.jquery
      var sign_bt = $('#sign_bt')
      var sign_icon = $('#sign_icon')
      var sign_msg = $('#sign_message')

      //确认签到按钮状态
      common.axios('/attendance/getAttendanceStatus', 'get', null,
        function (res) {
          console.log(res)
          if (res.data.data === -1) {
            //没有签到时
            sign_bt.attr('class', 'layui-btn layui-btn-primary layui-border-green layui-btn-radius signin_bt')
            sign_icon.attr('class', 'layui-icon layui-icon-face-smile')
            sign_msg.text('请签到')
            //为签到按钮设置点击响应
            sign_bt.click(function () {
              common.axios('/attendance/insertAuto', 'post', null,
                function (res) {
                  //签到成功时
                  if (res.data.code === 200) {
                    sign_bt.unbind()
                    location.reload()
                  }
                })
            })
          } else if (res.data.data === 0) { //今天已经签过到的时候
            console.log(res)
            sign_bt.attr('class',
              'layui-btn-disabled layui-btn-radius signin_bt layui-anim layui-anim-upbit',
              'disabled',
              'disabled')
            sign_icon.attr('class', 'layui-icon layui-icon-ok')
            sign_msg.text('您今日已完成签到！！')
          } else if (res.data.data === 1) {
            //迟到
            sign_bt.attr('class',
              'layui-btn layui-btn-radius layui-btn-warm signin_bt',
              'disabled',
              'disabled')
            sign_icon.attr('class', 'layui-icon layui-icon-ok ')
            sign_msg.text('您今天迟到了哦')
          } else if (res.data.data === 2) {
            //过晚
            sign_bt.attr('class',
              'layui-btn layui-btn-radius layui-btn-danger signin_bt',
              'disabled',
              'disabled')
            sign_icon.attr('class', 'layui-icon layui-icon-close ')
            sign_msg.text('今日按照旷工处理')
          }
        })
    })
  </script>
</body>

</html>